<template>
   <div class="logincom">
    <form action="" @submit.prevent="login()">
    <div class="dl"> 
        <h1>登陆界面</h1>
        <div><img src="../assets/用户-copy.png" alt=""><input type="text" placeholder="账号" required v-model.lazy.trim="username"></div>
        <div><img src="../assets/密码-copy.png" alt=""><input type="password" placeholder="密码" required v-model.lazy.trim="pwd"></div>
        <div class="gouxuan"> <input type="checkbox" v-model="isRem">记住密码</div>
        <button>登录按钮</button>
        <router-link to="/userlogin">还没有账号？点击注册</router-link>
    </div> 
    </form>  
   </div>
   
</template>

<!-- 脚本 -->
<script>
import { mapState } from 'vuex';
export default {
    name : "LoginCom",
    // 存储组件的数据
    data(){
        return{
            username : '', //用v-model将输入框的value值直接赋值给username变量
            pwd : '',
            isRem : false,//默认不勾选
        }
    },
        computed:{
        ...mapState(['user']),
    },
    // 加载完成之后
    mounted(){
        // 上次登录时记住密码的状态
        let isremmber = localStorage.getItem('loginRem');
        console.log(isremmber);//字符串数据/null
        // 判断上次是否记住密码



        this.username = isremmber=='true' ? localStorage.getItem('loginuser') :'';
        this.pwd = isremmber=='ture' ? localStorage.getItem('loginpwd') : '';
        this.isRem = isremmber=='ture' ? true : false;
    },
    //methods对象： 存储事件函数
    methods:{
        // 登陆函数：从vuex里面获取注册的数据：根据手机号码/邮箱和密码查找对应的用户，完成登录并储存账号
        login(){
            let user = this.user;
            for(let item of this.user){
                if ((this.username == item.tel|| this.user==item.email) && this.pwd==item.pwd) {
                     localStorage.setItem(item.uname,item.pwd);
                    if(this.isRem){
                    // 本地存储记录本次成功登陆的账号和密码
                        localStorage.setItem('loginuser',this.username);
                        localStorage.setItem('loginpwd',this.pwd);
                        localStorage.setItem('loginRem',this.isRem);
                    }else{
                    // 将上次存储到本地存储的登录账号和密码，上次记录密码的状态进行清除
                        localStorage.clear();
                }
                    sessionStorage.setItem('islogin',this.username);
                    alert('登陆成功');
                    this.$router.push('/home');
                    break;
                }else{
                        alert('NO')
                    } 
                
            }
            return user;
            // const user = [
            //     {username : 'admin1' , pwd :'123456'},
            //     {username : 'admin2' , pwd :'987654'},
            //     {username : 'admin3' , pwd :'456789'},
            //     {username : 'admin4' , pwd :'654321'},
            //     {username : 'admin5' , pwd :'666666'},
            // ];
            // 根据输入框输入的账号和密码，如果输入的数据跟上面组中的任意一组数组匹配，我们认为登录成功：
            // 1.记录登录状态到本地存储localStorage
            // 2.跳转到首页
            // for (let i = 0; i< user.length; i++) {
            //     if (this.username == user[i].username && this.pwd == user[i].pwd) {
            //         localStorage.setItem(user[i].username,user[i].pwd);
            //         alert('登陆成功');
            //         this.$router.push('/home');
            //         break;
            //     }else{
            //         alert('NO')
            //     } 
            // }
            // user.forEach(item =>{
            //     if (item.username == this.username && item.pwd == this.pwd) {
            //         localStorage.setItem(item.username,item.pwd);
            //         sessionStorage.setItem('islogin','true')
            //         alert('登陆成功');
            //         this.$router.push('/home');
            //         return;
            //     }else{
            //         alert('NO')
            //         return;
            //     }
            // })
            // 过滤函数fillter:设置一个过滤条件，如果符合的数据存储到新数组内
            // let result = user.filter(item =>{
            //     // return 出过滤的条件（判断条件）
            //     return item.username == this.username && item.pwd ==this.pwd
            // });
            // console.log(result);
            // // 判断是否登录成功
            // if (result.length > 0) {
            //     // 在登陆成功的前提下，判断是否需要记住密码
            //     
            
            //     alert('登陆成功');
            //     this.$router.push('/home');
            //     return;
            // }else{
            //      alert('NO');
            //      return;
            // }
            
        }
    }
}
</script>

<!-- 样式 -->
<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    overflow: hidden;
    position: relative;
}
.dl{
    background-color: rgb(245, 172, 172);
    border-radius: 20px;
    width: 50%;
    height: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.dl div{
    padding-top: 20px;
    padding-bottom: 10px;
    width: 67%;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    
}
.dl div input{
    width: 100%;
    border-radius: 8px;
    border: 0;
}
img{
   height: 2.5rem;
}
.dl .gouxuan input{
    width:50px ;
}
button{
    margin: 10px;
    width: 67%;
    line-height: 45px;
    border-radius: 8px;
    border: 0;
    background-color:#666;
    color: gold;
}

</style>